<script setup>
    import { inject } from 'vue';
    const emitter = inject('emitter');
    const props = defineProps(['id', 'songName', 'singerList', 'duration'])
    const AddToPlayList = () => {
        emitter.emit('addData', {
            id: props.id,
            songName: props.songName,
            singerList: props.singerList,
            duration: props.duration 
        });
    }
</script>

<template>
    <div @click="AddToPlayList"><img src="../../assets/img/add.png"></div>
</template>

<style lang='less' scoped>

    div{
        padding: 2px!important;
        width: 20px!important;
        height: 20px!important;
        cursor: pointer;
        position: relative;
        &:hover{
            background-color: #ddd;
            border-radius: 60%;
        }
        img{
            display: block;
            width: 93%;
            height: 93%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    }

</style>